<template>
  <a-row class="login-container">
    <a-col
      :xs="0"
      :sm="0"
      :md="12"
      :lg="14"
      :xl="16"
    ></a-col>
    <a-col
      :xs="24"
      :sm="24"
      :md="12"
      :lg="10"
      :xl="8"
      class="login-right"
    >
      <div class="login-container-form">
        <div class="login-container-title">
          {{ title }}
        </div>
        <a-form
          :model="formState"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item name="username">
            <a-input
              v-model:value="formState.username"
              placeholder="用户名"
            >
              <template #prefix>
                <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item name="password">
            <a-input-password
              v-model:value="formState.password"
              placeholder="密码"
              autocomplete="true"
            >
              <template #prefix>
                <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
              </template>
            </a-input-password>
          </a-form-item>
          <a-row
            class="selectApi"
            justify="end"
            v-if="isDev"
            @click="jumpToSelectApi"
          >
            <div class="text">选择接口地址</div>
          </a-row>
          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
              :loading="loginBtnLoading"
              :disabled="btnDisabled"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-col>
  </a-row>
</template>
<script setup>
import { useAppStore } from '@/store/modules/app'
import { message, notification } from 'ant-design-vue'
import { useBoolean } from '@/hooks/index.js'

const isDev = import.meta.env.DEV
const title = import.meta.env.VITE_APP_TITLE
const appStore = useAppStore()
const router = useRouter()
const route = useRoute()

const { redirect } = unref(route.query)

const formState = reactive({
  username: 'admin',
  password: '123456',
  remember: true,
})
const [loginBtnLoading, toggleLoginBtnLoading] = useBoolean()
const btnDisabled = computed(() => !formState.username || !formState.password)
const onFinish = async values => {
  toggleLoginBtnLoading()
  const flag = await appStore.login(values)
  toggleLoginBtnLoading()
  if (flag) {
    notification.success({
      message: '登录成功',
      description: `欢迎回来：${appStore.realName}`,
      duration: 3,
    })
    await router.push(redirect ? redirect : '/modbus')
    return
  }
  message.error('登录失败！')
}
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo)
}

const jumpToSelectApi = () => {
  router.push('/selectApi')
}
</script>
<style lang="scss" scoped>
:deep(.ant-col) {
  width: 100%;
  padding: 0 10px 0;
}

:deep(.ant-input) {
  height: 35px;
}

:deep(.ant-btn) {
  width: 100%;
  height: 32px;
  border-radius: 16px;

  &:disabled {
    background-color: #f5f5f5;
  }
}

.login-right {
  display: flex;
  justify-content: center;
}

.login-container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/login-images/login-background.jpg') no-repeat center/cover;

  &-form {
    width: 320px;
    height: 380px;
    padding: 24px;
    margin-top: calc((100vh - 380px) / 2);
    //margin-right: 20px;
    //margin-left: 20px;
    background: url('@/assets/login-images/login-form.png') no-repeat center/100%;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
  }

  &-title {
    margin-bottom: 50px;
    font-size: 20px;
    color: #fff;
    text-align: center;
  }
}

.selectApi {
  padding: 0 10px;
  color: #fff;
  margin-bottom: 10px;

  .text {
    font-size: 14px;
    position: relative;
    cursor: pointer;
    user-select: none;

    &:hover:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      bottom: 0;
      border-bottom: 1px solid #fff;
    }
  }
}
</style>
